<template>
  <div style="display: flex; justify-content: space-around; height: 100%">
    <div style="width: 32%">
      <div class="bgs">
        <Echart :options="options1" height="100%" width="100%"></Echart>
      </div>
    </div>
    <div style="width: 32%" class="bgs">
      <div style="height: 10%; display: flex; flex-direction: column-reverse">
        <div
            style="width: 100%; height: 80%; background-color: #404640; border-radius: .1rem .1rem 0 0; font-size: .6rem; display: flex; align-items: center; justify-content: space-around">
          生化危急值
        </div>
      </div>
      <div style="height: 90%">
        <dv-scroll-board :config="config1" style="width:100%;height:99%"/>
      </div>
    </div>
    <div style="width: 32%" class="bgs">
      <div style="height: 10%; display: flex; flex-direction: column-reverse">
        <div
            style="width: 100%; height: 80%; background-color: #404640; border-radius: .1rem .1rem 0 0; font-size: .6rem; display: flex; align-items: center; justify-content: space-around">
          免疫危急值
        </div>
      </div>
      <div style="height: 90%">
        <dv-scroll-board :config="config2" style="width:100%;height:99%"/>
      </div>
    </div>
  </div>
</template>

<script>
import Echart from '@/common/echart'

export default {
  name: "index",
  components: {
    Echart
  },
  data() {
    return {
      options1: {
        title: {
          top: "20%",
          text: '危急值及时处理率',
          left: 'center',
          textStyle: {
            color: '#fff'
          }
        },
        tooltip: {
          trigger: 'item',
          // formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          bottom: '20%',
          data: ['危急值样本数量', '正常样本数量']
        },
        label: {
          formatter: '{b}\n {c}  {per|{d}%}  ',
          position: 'inner',
          borderWidth: 1,
          borderRadius: 2,
          rich: {
            a: {
              color: '#6E7079',
              lineHeight: 22,
              align: 'center'
            },
            hr: {
              borderColor: '#8C8D8E',
              width: '100%',
              borderWidth: 1,
              height: 0
            },
            b: {
              color: '#4C5058',
              fontSize: 14,
              fontWeight: 'bold',
              lineHeight: 33
            },
            per: {
              color: '#fff',
              backgroundColor: '#4C5058',
              padding: [3, 4],
              borderRadius: 4
            }
          }
        },
        series: [
          {
            lable: {},
            type: 'pie',
            radius: '65%',
            center: ['50%', '50%'],
            selectedMode: 'single',
            data: [
              {value: 0, name: '危急值样本数量', itemStyle: {color: '#13b1ff'}},
              {value: 0, name: '正常样本数量', itemStyle: {color: '#ff5c00'}},
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      },
      config1: {
        header: ['序号', '患者姓名', '检测项目', '结果', '参考范围'],
        rowNum: 15,
        data: [

        ]
      },
      config2: {
        header: ['序号', '患者姓名', '检测项目', '结果', '参考范围'],
        rowNum: 15,
        data: [

        ]
      }
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    getData(){
      this.$http.post(this.urlInterface.getCriticalValue).then(res => {
        this.options1.series[0].data[0].value = res.data.data.data.processed
        this.options1.series[0].data[1].value = res.data.data.data.untreated
        this.config1.data = []
        this.config2.data = []
        res.data.data.data.map(e => {
          let arr = [e.sampleResultId, e.patientName, e.itemName, e.result, e.criticalValueLower + "-" + e.criticalValueUpper]
          //1生化  0免疫
          if (e.itemType == 1) {
            this.config1.data.push(arr)
          }else{
            this.config2.data.push(arr)
          }
        })
        this.config1 = {...this.config1}
        this.config2 = {...this.config2}
        // console.log(res.data.data.process);//已处理
        // console.log(res.data.data.untreated);//未处理
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import "src/assets/scss/public.scss";

</style>
